<template>
  <div>
    <div class="find">找回密码</div>
    <div class="inputss">
      <input class="pwd" v-model="phone" placeholder="请输入手机号码/电子邮箱"/>
      <input class="pwd2" v-model="password" type="text" autocomplete="off" placeholder="请输入新密码" v-if="showPassword" />
      <input class="pwd2" v-model="password" type="password" autocomplete="off"  placeholder="请输入新密码" v-else />
      <button class="btn1"  @click="setPasswordType"></button>
      <button class="btn" @click="resetPassword" :disabled="!phone||!password">重置密码</button>
    </div>
  </div>
</template>

<script>
import { RECORD_USERINFO } from '../store/mutation-type'
import { mapMutations } from 'vuex'
import {forgetPassword} from '../service/api'
export default {
  data () {
    return {
      phone: '',
      password: '',
      showPassword: false
    }
  },
  created () {
    if (localStorage.account) this.phone = localStorage.account
  },
  methods: {
    ...mapMutations([RECORD_USERINFO]),
    resetPassword: function () {
      forgetPassword(this.phone, this.password).then(res => {
        if (res.code === 200) {
          this.$message({message: '重置密码成功', iconClass: 'icon-hide'})
          this.RECORD_USERINFO(res.value)
          localStorage.account = this.phone

          this.$router.push('/login')
        }
      })
    },
    setPasswordType: function () {
      this.showPassword = !this.showPassword
    }
  }
}
</script>

<style scoped lang="less">
*{
  margin:0;
  padding:0
}
.find{
  font-size:.29rem;
  color:rgb(107, 36, 102);
}
.inputss{
  width:3.5rem;
  height:3.5rem;
  position: relative;
  background: pink;
  margin:0 auto;
  .pwd{
    width:2.6rem;
    height:.55rem;
    border-radius: .1rem;
    outline: 0;
    padding:0 .2rem;
    font-size:.22rem;
    border:1px solid lightgray;
    position: relative;
  }
  .pwd1{
    width:2.6rem;
    height:.55rem;
    border-radius: .1rem;
    outline: 0;
    padding:0 .2rem;
    font-size:.22rem;
    border:1px solid lightgray;
    position: relative;
    top:-.4rem;
  }
  .pwd2{
    width:2.6rem;
    height:.55rem;
    border-radius: .1rem;
    outline: 0;
    padding:0 .2rem;
    font-size:.22rem;
    border:1px solid lightgray;
    position: relative;
    top:-.3rem;
    left:.15rem;
  }
  .btn1{
    width:.2rem;
    height:.2rem;
    background: red;
    position: absolute;
    top:1.6rem;
    right:.6rem;

  }
  .btn{
    width:40%;
    height:.5rem;
    position: relative;
    top:-.6rem;
    border-radius: .1rem;
    outline: 0;
    cursor: pointer;
    color:white;
    border:1px solid lightgray;
    font-size: .22rem;
    background: rgb(107, 36, 102);
    &:disabled{ color:#999; background-color:lightgray !important;}
  }
}
</style>
